<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<div class="item">
				<h4>商品项</h4>
				<div class="box">
					<div class="box">
					    <ul v-for="(user,i) in list">
					    	{{user.name}}
							<button v-on:click="add(i)">添加<btton>
					    </ul>
					</div>
				</div>
			</div>
			<div class="item">
				<h4>购物车项</h4>
				<div class="box">
					<ul v-for='(list,index) in classlist'>
						{{list}}
						<button @click='remove(index)'>删除<button>
					</ul>
				</div>
			</div>
			<button type="button">结算<tton>
		</div>
		<script src="https://unpkg.com/vue/dist/vue.js"></script>
		<script>
			new Vue({
				el: '#app',
				data: {
					classlist:[],
					list:[
						{id:1,name:"商品一"},
						{id:2,name:"商品二"},
						{id:3,name:"商品三"},
						{id:4,name:"商品四"},
						{id:5,name:"商品五"}
					],
					message:""
				},
				methods: {
					add(index){
						//插入数据到商品库
						this.classlist.push(this.list[index].name)
					},
					remove:function(index){
						this.classlist.splice(index,1)
					}
				}
			})
		</script>
	</body>
<html>